import '@wangeditor/editor/dist/css/style.css' // 引入 css

import React, { useState, useEffect } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig, DomEditor } from '@wangeditor/editor'
import { message } from 'antd';

function MyEditor(props) {
    // console.log(props,'props');
    const {
        value,
        getHtmlContent,
        clear
        // onRef
    } = props
    // editor 实例
    // const [editor, setEditor] = useState<IDomEditor | null>(null)   // TS 语法
    const [editor, setEditor] = useState(null)                   // JS 语法

    // 编辑器内容
    const [html, setHtml] = useState('')

    // const [onRef, setOnRef] = useState('')

    //查看当前工具栏及其排序
    //    function onChange(editor) {
    //         const toolbar = DomEditor.getToolbar(editor)
    //         console.log("工具栏配置", toolbar.getConfig().toolbarKeys); // 工具栏配置
    //      }


    // 模拟 ajax 请求，异步设置 html
    // useEffect(() => {
    // setTimeout(() => {
    //     setHtml('<p>hello world</p>')
    // }, 1500)
    // }, [])

    // 工具栏配置
    // const toolbarConfig: Partial<IToolbarConfig> = { }  // TS 语法
    const toolbarConfig = {}     // JS 语法
    //排除部分菜单
    toolbarConfig.excludeKeys = [
        // "fontSize",
        // "fontFamily",
        // "lineHeight",
        "emotion",
        // "insertLink",
        // 'group-image',
        // 'group-video',
        "insertTable",
        "codeBlock",
        "divider"
        // 'group-more-style' // 排除菜单组，写菜单组 key 的值即可
    ]
    // toolbarConfig.toolbarKeys = [
    //     // 菜单 key
    //     'headerSelect',

    //     // 分割线
    //     '|',

    //     // 菜单 key
    //     'bold', 'italic',
    //     // 菜单组，包含多个菜单
    //     {
    //         key: 'group-more-style', // 必填，要以 group 开头
    //         title: '更多样式', // 必填
    //         iconSvg: '<svg>....</svg>', // 可选
    //         menuKeys: ["through", "code", "clearStyle"] // 下级菜单 key ，必填
    //     },
    // ]

    // 编辑器配置
    // const editorConfig: Partial<IEditorConfig> = {    // TS 语法
    const editorConfig = {                         // JS 语法
        placeholder: '请输入...',
        MENU_CONF: {},
    }
    //最大可输入字符数
    editorConfig.maxLength = 15000;

    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])
    //初始值
    useEffect(() => {
        if (value) {
            setHtml(value)
        } else {
            setHtml('')
        }
        // if(clear == true){
        //     setHtml('')
        // }
    }, [value, clear])

    // useEffect(()=>{
    //     if (this.props.onRef) {
    //         console.log(1212);
    //     // setOnRef(onRef);
    //  }
    // },[onRef])

    // 自定义校验链接
    // function customCheckLinkFn(text: string, url: string): string | boolean | undefined {   // TS 语法
    function customCheckLinkFn(text, url) {                                              // JS 语法

        if (!url) {
            return
        }
        if (url.indexOf('http') !== 0) {
            return '链接必须以 http/https 开头'
        }
        return true

        // 返回值有三种选择：
        // 1. 返回 true ，说明检查通过，编辑器将正常插入链接
        // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
        // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
    }

    // 自定义转换链接 url
    // function customParseLinkUrl(url: string): string {   // TS 语法
    function customParseLinkUrl(url) {                // JS 语法

        if (url.indexOf('http') !== 0) {
            return `http://${url}`
        }
        return url
    }

    // 插入链接
    editorConfig.MENU_CONF['insertLink'] = {
        checkLink: customCheckLinkFn, // 也支持 async 函数
        parseLinkUrl: customParseLinkUrl, // 也支持 async 函数
    }
    // 更新链接
    editorConfig.MENU_CONF['editLink'] = {
        checkLink: customCheckLinkFn, // 也支持 async 函数
        parseLinkUrl: customParseLinkUrl, // 也支持 async 函数
    }
    editorConfig.MENU_CONF['emotion'] = {
        emotions: '😃 😄 😁 😆 😅 😂 😊 😇 😉 😌 😍 😘 😚 😋 😝 😜 😎 😏 😒 😞 😔 😣 😖 😫 😩 😢 😭 😤 😠 😡 😳 😱 😨 😶 😷 😈 💩 👻 💀 👀 👣 👐 🙌 👏 👍 👎 👊 ✊ ✌️ 👌 👈 👉 👆 👇 ☝️ ✋ 👋 💪 ✍️ 🙏 '.split(' ') // 数组
    }

    //插入图片
    editorConfig.MENU_CONF['uploadImage'] = {
        server: window._noticeBasicProxy + '/api/commons/file/batch/upload',
        // server: '/api/upload-img-10s', // test timeout
        // server: '/api/upload-img-failed', // test failed
        // server: '/api/xxx', // test 404

        timeout: 5 * 1000, // 5s

        fieldName: 'files',
        allowedFileTypes: ['image/*'],
        meta: {
            modelName: "news",
        },
        metaWithUrl: false, // join params to url
        // headers: { Accept: 'text/x-json' },
        headers: {
            Accept: '*/*',
            Authorization: sessionStorage.getItem('token')
        },

        maxFileSize: 10 * 1024 * 1024, // 10M

        base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb

        onBeforeUpload(file) {
            // console.log('onBeforeUpload', file,)

            return file // will upload this file
            // return false // prevent upload
        },
        onProgress(progress) {
            // console.log('onProgress', progress)
        },
        onSuccess(file, res) {
            // console.log('onSuccess', file, res)
        },
        onFailed(file, res) {
            message.warn(res.message);
            // alert(res.message)
            // console.log('onFailed1111', file, res)
        },
        onError(file, err, res) {
            message.warn('后台配置错误或图片大小超过10M');
            // alert(err.message)
            // console.error('onError', file, err, res)
        },

        customInsert(res, insertFn) {
            //   console.log('customInsert', res)
            const imgInfo = res.data[0] || {}
            const { url, alt, href } = imgInfo
            if (!url) throw new Error(`Image url is empty`)

            //   console.log('Your image url ', url)
            insertFn(url, alt, href)
        },

        // customUpload(file, insertFn) {
        //   console.log('customUpload', file)

        //   return new Promise((resolve) => {
        //     // Simulate async insert image
        //     setTimeout(() => {
        //       const src = `https://www.baidu.com/img/flexible/logo/pc/result@2.png?r=${Math.random()}`
        //       insertFn(src, 'baidu logo', src)
        //       resolve('ok')
        //     }, 500)
        //   })
        // },

        // customBrowseAndUpload(insertFn) {
        //   alert('Custom browse and upload')

        //   // Simulate async insert image
        //   setTimeout(() => {
        //     const src = 'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
        //     insertFn(src, 'baidu logo', src) // insert a image
        //   }, 500)
        // },
    }
    //插入视频
    editorConfig.MENU_CONF['insertVideo'] = {
        onInsertedVideo(videoNode) {
            //   console.log('inserted video', videoNode)
        },
    }
    //上传视频
    editorConfig.MENU_CONF['uploadVideo'] = {
        server: window._noticeBasicProxy + '/api/commons/file/batch/upload',
        // server: '/api/upload-img-failed', // test failed
        // server: '/api/xxx', // test 404

        timeout: 5 * 1000, // 5s

        fieldName: 'files',
        meta: { modelName: "news", },
        metaWithUrl: false, // join params to url
        headers: {
            Accept: '*/*',
            Authorization: sessionStorage.getItem('token')
        },

        maxFileSize: 10 * 1024 * 1024, // 10M

        onBeforeUpload(file) {
            //   console.log('onBeforeUpload', file)

            return file // will upload this file
            // return false // prevent upload
        },
        onProgress(progress) {
            //   console.log('onProgress', progress)
        },
        onSuccess(file, res) {
            //   console.log('onSuccess', file, res)
        },
        onFailed(file, res) {
            message.warn(res.message);
            //   alert(res.message)
            //   console.log('onFailed', file, res)
        },
        onError(file, err, res) {
            message.warn('后台配置错误或视频大小超过10M');
            //   alert(err.message)
            //   console.error('onError', file, err, res)
        },

        customInsert(res, insertFn) {
            //   console.log('customInsert', res)
            const videoInfo = res.data[0] || {}
            const { url, poster } = videoInfo
            if (!url) throw new Error(`Video url is empty`)

            //   console.log('Your video url ', url)
            insertFn(url, poster)
        },

        // customUpload(file, insertFn) {
        //   console.log('customUpload', file)

        //   return new Promise((resolve) => {
        //     // Simulate async insert video
        //     setTimeout(() => {
        //       const src = `https://www.w3school.com.cn/i/movie.ogg`
        //       const poster = 'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
        //       insertFn(src, poster)
        //       resolve('ok')
        //     }, 500)
        //   })
        // },

        // customBrowseAndUpload(insertFn) {
        //   alert('Custom browse and upload')

        //   // Simulate async insert video
        //   setTimeout(() => {
        //     const src = '<iframe src="//player.bilibili.com/player.html?aid=250348909&bvid=BV1Pv411w7Xr&cid=401518678&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>'
        //     insertFn(src, '')
        //   }, 500)
        // },
    }
    return (
        <>
            <div style={{ border: '1px solid #ccc', zIndex: 100, marginLeft: '72px', marginTop: '10px' }}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={editor => { setHtml(editor.getHtml()); getHtmlContent(editor.getHtml()) }}
                    mode="default"
                    style={{ height: '270px', overflowY: 'hidden' }}
                />
            </div>
            {/* <div style={{ marginTop: '15px' }}>
                {html}
            </div> */}
        </>
    )
}

export default MyEditor